<template>
  <view class="pagebox">
    <img class="img" @click="showPopup()" src="../../static/selectDown.png" alt />
    <div class="collapse">
      <div class="cl_it" v-for="(it,ind) in collapse[select]" :key="ind">
        <div class="q_tip">
          <p class="rpx28 app_col">
            * Q{{8+ind}}.
            <text class="rpx28 col282">{{it.name}}</text>
          </p>
        </div>
        <picker
          @change="bindPickerChange($event,ind)"
          v-if="it.type=='sel'"
          class="clbox rpx32 col3A4060"
          :range="collapse[select][ind].item"
          :value="ind==0?collapse[select][ind].index:(ind==1?collapse[select][ind].index1:collapse[select][ind].index2)"
        >
          <navigator class="cl_sel">
            <p
              class="c_title omit1 rpx32 col3A4060"
            >{{collapse[select][ind].item[ind==0?collapse[select][ind].index:(ind==1?collapse[select][ind].index1:collapse[select][ind].index2)]}}</p>
            <img src="../../static/q2.png" />
          </navigator>
        </picker>
        <input
          v-if="it.type !='sel'"
          style="padding: 0 20upx 0 24upx;width: 506upx;"
          class="clbox rpx32 col3A4060"
          :type="it.type || 'text'"
          v-model="collapse[select][ind].text"
          :placeholder="it.val"
          placeholder-class="rpx32 colB3B"
        />
      </div>
    </div>

    <div class="but88box">
      <navigator @click="save" class="but88 rpx32 colfff app_bg">下一步</navigator>
    </div>

    <uni-popup
      class="u_p"
      :show="type === 'center'"
      position="middle"
      mode="fixed"
      msg
      @hidePopup="togglePopup('')"
    >
      <div class="show_up">
        <img class="lx_img" src="static/s4.png" />
        <div class="lx_title">
          <p class="rpx28 app_col omit2">
            * Q15.
            <text class="rpx28 col282">请查看该店铺是否还有其他冰柜？</text>
          </p>
        </div>
        <div class="lx_but">
          <navigator class="rpx34 colfff" @click="toNo">无</navigator>
          <navigator class="rpx34 colfff app_bg" @click="toYes">有</navigator>
        </div>
      </div>
    </uni-popup>

    <uni-popup
      class="u_p ice"
      :show="type === 'top'"
      position="top"
      mode="fixed"
      msg
      @hidePopup="togglePopup('')"
    >
      <div class="ice_box">
        <navigator @click="selectIce(index)" :class="{'active app_col':index==selectIndex}" class="ice_it rpx28 col282" v-for="(item,index) in collapse" :key="index">
          冰柜{{index+1}}
          <img class="ice_del" src="../../static/q3.png" />
        </navigator>
        <navigator class="ice_add rpx32 colB3B" @click="toYes">
          <img class="ice_del" src="../../static/q4.png" />添加冰柜
        </navigator>
      </div>
    </uni-popup>
  </view>
</template>
<script>
import mixins from "@/mixins";
import ntfy from "../../components/ntfy/index.vue";
// import uniCollapse from '../../components/uni-collapse/uni-collapse.vue'
// import uniCollapseItem from '../../components/uni-collapse-item/uni-collapse-item.vue'
import uniPopup from "../../components/uni-popup/uni-popup.vue";
import { mapState } from "vuex";
export default {
  // mixins: [mixins],
  components: { ntfy, uniPopup /*,uniCollapse,uniCollapseItem*/ },
  data() {
    return {
      type: "",
      question: [],
      collapse: [
        [
          { type: "sel", name: "", val: "", item: [], index: 0, id: [] },
          { type: "sel", name: "", val: "", item: [], index1: 0, id: [] },
          { type: "sel", name: "", val: "", item: [], index2: 0, id: [] },
          { type: "number", name: "", val: "仅整数", text: "" },
          { type: "text", name: "", val: "选择或输入", text: "" }
        ]
      ],
      shopId: 0,
      catId: 0,
      select: 0,
      selectIndex:-1
    };
  },
  onBackPress() {
    if (this.type !== "") {
      this.type = "";
      return true;
    }
  },
  onLoad(e) {
    let _that = this;
    _that.shopId = e.shopId;
    _that.catId = e.catId;
    uni.getStorage({
      key: "shopId-" + _that.shopId,
      success: res => {
        if (res.data.q8) {
          _that.collapse = res.data.q8;
        } else {
          this.noMessage();
        }
      },
      fail: res => {
        this.noMessage();
      }
    });
  },
  computed: {
    // ...mapState(["storeId"]),
    // ...mapState(["catId"])
  },
  methods: {
    selectIce(index){
      this.selectIndex = index
      this.select = index
      uni.setNavigationBarTitle({
          title: '第四部分:冰柜'+(index+1)
      });
    },
    showPopup() {
      if (this.type != "") {
        this.type = "";
      } else {
        this.type = "top";
      }
    },
    noMessage() {
      let _that = this;
      uni.getStorage({
        key: "question",
        success: res => {
          _that.question = res.data;
          if (res.data[7].collapse) {
            _that.collapse = res.data[7].collapse;
            return;
          }
          for (let i = 7; i < 12; i++) {
            _that.collapse[_that.select][i - 7]["name"] = res.data[i].title;
            if (res.data[i].item != "") {
              _that.collapse[_that.select][i - 7].item = [];
              _that.collapse[_that.select][i - 7].id = [];
              res.data[i].item.forEach(element => {
                if (_that.collapse[_that.select][i - 7].item) {
                  _that.collapse[_that.select][i - 7].item.push(element.name);
                }
                if (_that.collapse[_that.select][i - 7].id) {
                  _that.collapse[_that.select][i - 7].id.push(element.id);
                }
              });
            }
            if (i < 10) {
              _that.collapse[_that.select][i - 7].val =
                "1) " + res.data[i].item[0].name;
            } else {
              if (res.data[i].item != "") {
                _that.collapse[_that.select][i - 7].val =
                  res.data[i].item[0].name;
              } else {
                _that.collapse[_that.select][i - 7].val = res.data[i].item;
              }
            }
          }
        }
      });
    },
    togglePopup(type) {
      this.type = type;
    },
    bindPickerChange(e, ind) {
      if (ind == 0) {
        this.collapse[this.select][ind].index = e.target.value;
      } else if (ind == 1) {
        this.collapse[this.select][ind].index1 = e.target.value;
      } else {
        this.collapse[this.select][ind].index2 = e.target.value;
      }
    },
    save() {
      this.type = "center";
      this.saveMessage();
      // this.question[7].collapse = this.collapse;
      // let item = this.question[7];
      // item.progress = (this.complete()/item.collapse.length)*100+"%"
    },
    toNo() {
      this.saveMessage();
      mixins.navigate(
        "../index/lixian_steps?shopId=" + this.shopId + "&catId=" + this.catId
      );
    },
    toYes() {
      this.select = this.collapse.length;
      this.type = "";
      this.collapse.push([
        { type: "sel", name: "", val: "", item: [], index: 0 },
        { type: "sel", name: "", val: "", item: [], index1: 0 },
        { type: "sel", name: "", val: "", item: [], index2: 0 },
        { type: "number", name: "", val: "仅整数", text: "" },
        { type: "text", name: "", val: "选择或输入", text: "" }
      ]);
      this.saveMessage();
    },
    saveMessage() {
      uni.getStorage({
        key: "shopId-" + this.shopId,
        success: res => {
          res.data.q8 = this.collapse;
          uni.setStorage({
            key: "shopId-" + this.shopId,
            data: res.data,
            success: res => {
              this.noMessage();
            }
          });
        },
        fail: res => {
          uni.setStorage({
            key: "shopId-" + this.shopId,
            data: {
              q8: this.collapse
            },
            success: res => {
              this.noMessage();
            }
          });
        }
      });
    },
    complete() {
      let num = 3;
      if (this.question[7].collapse[3].text != "") {
        num++;
      }
      if (this.question[7].collapse[4].text != "") {
        num++;
      }
      return num;
    }
  }
};
</script>

<style scoped>
.img {
  width: 40upx;
  height: 40upx;
  position: fixed;
  left: 496upx;
  top: 24upx;
  z-index: 999;
}
.rpx32 {
  border: none;
  outline: none;
}
.uni-collapse {
  background: none !important;
}
.q_tip {
  min-height: 50upx;
  margin: 28upx 36upx 25upx;
}
.cl_it {
  position: relative;
  margin-bottom: 56upx;
}
.clbox {
  margin-left: 110upx;
  width: 550upx;
  min-height: 66upx;
  background: rgba(234, 234, 234, 1);
  border-radius: 4upx; /*display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;*/
}
.collapse .c_title {
  max-width: 420upx;
  display: flex;
  height: 66upx;
  align-items: center;
  padding: 0 20upx 0 24upx;
}
.cl_sel {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.clbox img {
  width: 20upx;
  height: 20upx;
  display: block;
  margin-right: 20upx;
}
/* .clbox:after,.collapse:after{content: unset;}
	.collapse >>> .uni-collapse-cell__title{display: flex;height:66upx;align-items: center;padding: 0 20upx 0 24upx;}
	.collapse >>> .uni-collapse-cell__content:after{content: unset;} */

.but88box {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #f7f7f7;
}
.but88 {
  margin: 40upx 32upx 102upx;
  height: 80upx;
  width: unset;
}

.u_p >>> .uni-popup {
  height: unset !important;
  border-radius: 8upx;
  padding: 0;
}
.ice >>> .uni-popup {
  border-radius: 0upx;
  top:88upx;
}

.ice_box {
  width: 100%;
}
.ice_it {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72upx;
  padding: 0 45upx 0 49upx;
}
.ice_it .ice_del {
  width: 32upx;
  height: 32upx;
  display: none;
}
.ice_it.active {
  background: #f1f1f1;
}
.ice_it.active .ice_del {
  display: block;
}
.ice_add {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 92upx;
}
.ice_add img {
  width: 40upx;
  height: 40upx;
  margin-right: 14upx;
}
</style>